<template>
  <div id="stockTransfer">
    <x-header :left-options="{backText: ''}">库存转移</x-header>
    <div class="tranHead">
      <div class="tranHeadCon">
        <img src="../../assets/img/my/stockTransfer_banner.png" alt="">
      </div>
    </div>
    <div class="shiftList">
      <h2>转移列表</h2>
      <ul>
        <li v-for="(item, index) in 2" :key="index">
          <div class="shiftListImg"><img src="../../assets/img/my/stockTransfer_banner.png" alt=""></div>
          <p>特级大红包水电费卡士大夫士大夫</p>
          <div class="shiftListBtn"><span @click="onConfirmTransfer()">确认转移</span></div>
        </li>
      </ul>
    </div>
    <div class="shiftInfo">
      <h2>提示</h2>
      <p>1、 将库存商品转移兑换到其他活动商品中，是全部数量；</p>
      <p>2、 转移数量比例为**%提货，**%库存转移到其他商品；</p>
      <p>3、 根据当前商品价值比例兑换转移的商品价值数量，转移比例计算；</p>
      <p>4、 选择转移的商品，测算兑换数量有差余时小数点后面不计算（弥补差价或放弃）；</p>
      <p>5、 转移的商品只能每天卖出1单，自由买卖需要购进**。</p>
    </div>
  </div>
</template>

<script>
import { p2pStocktransfer } from '../../api'
import { mapState } from 'vuex'

export default {
  name: 'stockTransfer',
  data () {
    return {
      data: ''
    }
  },
  computed: {
    ...mapState(['user', 'token', 'openid'])
  },
  created () {
  },
  methods: {
    async onConfirmTransfer () {
      this.$vux.confirm.show({
        title: '请输入您要转移的数量',
        showInput: true,
        onConfirm: (num) => {
          this.handP2pStocktransfer(num)
        }
      })
    },
    async handP2pStocktransfer (num) {
      let form = new FormData()
      form.append('userID', this.user.user_id) // 用户ID
      form.append('old_goosID', 1) // 老商品ID
      form.append('old_number', num) // 转移老商品数量
      form.append('new_goodsID', 1) // 新商品ID
      let res = await p2pStocktransfer(form)
      if (res.code === 200) {
        this.$toastText(res.msg)
      } else {
        this.$toastText(res.msg)
      }
    }
  }
}
</script>

<style scoped lang="less">
#stockTransfer{
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  /deep/ .vux-header {
    background: rgba(126,89,254,1);
    position: absolute;
    width: 100%;
    .vux-header-title{
      color: #fff;
    }
    .vux-header-left .left-arrow:before {
      border-width: .0125rem 0 0 .0125rem;
      border-color: #fff;
    }
  }
  .tranHead{
    width: 100%;
    height: 3.75rem;
    background: rgba(126,89,254,1);
    position: relative;
    .tranHeadCon{
      width: 9.46rem;
      height: 3.5rem;
      background: rgba(238,233,255,1);
      border-radius: .25rem;
      position: absolute;
      top: 85%;
      left: 50%;
      transform: translate(-50%, -50%);
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .shiftList{
    padding-top: 1.2rem;
    h2{
      font-size: .3rem;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(51,51,51,1);
      line-height: .5rem;
      padding: 0 .625rem;
      margin: .27rem 0;
    }
    ul{
      padding: 0 .27rem;
      display: flex;
      justify-content: left;
      flex-wrap: wrap;
      li{
        background: rgba(255,255,255,1);
        border-radius: .0625rem;
        width: 4.59rem;
        margin-right: .27rem;
        margin-bottom: .27rem;
        padding: .35734rem;
        .shiftListImg{
          width: 3.875rem;
          height: 3.875rem;
          /*margin: .35734rem auto;*/
          img{
            width: 100%;
            height: 100%;
          }
        }
        p{
          font-size: .3rem;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(51,51,51,1);
          line-height: .5rem;
          padding: .25rem 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .shiftListBtn{
          text-align: center;
          span{
            display: inline-block;
            width: 2.25rem;
            height: .625rem;
            background: rgba(255,156,0,1);
            border-radius: .125rem;
            font-size: .325rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255,255,255,1);
            line-height: .625rem;
          }
        }
      }
      li:nth-child(2n){
        margin-right: 0;
      }
    }
  }
  .shiftInfo{
    padding: .27rem .625rem;
    h2{
      font-size: .3rem;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(51,51,51,1);
      line-height: .5rem;
      padding-bottom: .27rem;
    }
    p{
      font-size: .3rem;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(102,102,102,1);
      line-height: .5rem;
    }
  }
}
</style>
